<template>
	<view class="con">
		<view class="nav">
			<view class="title" :class="{'active':type==1}" @click="active(1)">抢购中</view>
			<view class="title" :class="{'active':type==2}" @click="active(2)">即将开抢</view>
		</view>
		<!-- <view class="time">
			<view class="tt">
				{{h<10?'0'+h:h}}
			</view>
			<view class="dd">:</view>
			<view class="tt">
				{{m<10?'0'+m:m}}
			</view>
			<view class="dd">:</view>
			<view class="tt">
				{{s<10?'0'+s:s}}
			</view>
		</view> -->
		<view class="goodsbox" v-for="(item,index) in list" @click="to(item.seckillId)">
			<image :src="item.goodsImg" mode="aspectFill" class="goodsimg"></image>
			<view class="goods_r">
				<view class="name">{{item.goodsName}}</view>
				<view class="box">
					<view class="qiang">
						<view>已抢{{item.robbedNum}}件</view>
						<view>{{((item.robbedNum/item.surplusNum)*100).toFixed(2)}}%</view>
					</view>
					<progress percent="30" activeColor="#F09238" active stroke-width="16" backgroundColor="#F7C89B"
						:border-radius="10" />
				</view>
				<view class="pbox">
					<view class="price">￥{{item.seckillPrice}}</view>
					<view class="y_price">￥{{item.price}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		snapup
	} from "../../api/product.js"
	export default {
		data() {
			return {
				type:1,
				h: 0,
				m: 0,
				s: 0,
				interval: null,
				time: 100,
				num:1,
				list:[]
			}
		},
		onShow() {
			// this.initInterval();
			this.getList()
			console.log(Date.parse('2021-04-02T02:30:06.000+0000'))
		},
		onReachBottom() {
			this.getList()
		},
		methods: {
			async getList() {
				uni.showLoading({
					title:"加载中..."
				})
				let res = await this.get(snapup,{pageSize:10,pageNum:this.num,type:this.type})
				this.num++
				this.list=[...this.list,...res.data]
			},
			active(e){
				this.type=e
				this.num=1
				this.list=[]
				this.getList()
			},
			to(id){
				if(this.type==1){
					uni.navigateTo({
						url:"/pages/Mall/sproduct?id="+id
					})
				}else{
					this.msg('暂未开抢',"none")
				}
			},
			// 倒计时
			initInterval() {
				let time = this.time
				if (time > 0) {
					this.interval = setInterval(() => {
						if (time == 0) {
							clearInterval(this.initInterval)
							this.h = 0
							this.m = 0
							this.s = 0
						} else {
							this.h = parseInt((time / 3600) % 24);
							this.m = parseInt((time / 60) % 60);
							this.s = parseInt(time % 60);
							time--
						}
					}, 1000)
				}
			},
		}
	}
</script>

<style>
	.y_price {
		font-size: 24rpx;
		font-weight: 400;
		color: #999999;
		opacity: 1;
		text-decoration: line-through;
	}

	.price {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #333333;
		opacity: 1;
		margin-right: 20rpx;
	}

	.pbox {
		display: flex;
		margin-top: 20rpx;
		align-items: center;
	}

	.qiang {
		color: #7F3F02;
		font-size: 12px;
		line-height: 16px;
		/* line-height: 40rpx; */
		align-items: center;
		position: absolute;
		left: 10px;
		top: 0;
		width: 360rpx;
		display: flex;
		justify-content: space-between;

	}

	.name {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 34rpx;
		color: #333333;
		opacity: 1;
		display: -webkit-box;
		/*将对象作为弹性伸缩盒子模型显示*/
		overflow: hidden;
		/* 超出的文本隐藏 */
		text-overflow: ellipsis;
		/* 溢出用省略号显示 */
		word-wrap: break-word;
		/* 文本高出宽度换行 */
		white-space: normal !important;
		/* 溢出不换行 */
		-webkit-line-clamp: 2;
		/* 表示显示的行数 */
		-webkit-box-orient: vertical;
		/* 从上到下垂直排列子元素 */
	}

	.goods_r {
		width: 450rpx;
		margin-left: 40rpx;
		height: 190rpx;
	}

	.box {
		width: 400rpx;
		height: 16px;
		border-radius: 10px;
		overflow: hidden;
		position: relative;
		margin-top: 20rpx;
	}

	.goodsimg {
		width: 200rpx;
		height: 200rpx;
		border-radius: 16rpx;
	}

	.goodsbox {
		padding: 0 30rpx;
		margin-bottom: 30rpx;
		height: 200rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}

	.con {
		padding-top: 100rpx;
	}

	.dd {
		width: 30rpx;
		text-align: center;
		font-size: 40rpx;
		font-weight: bold;
		color: #E6852C;
	}

	.tt {
		width: 50rpx;
		height: 50rpx;
		background-color: #E6852C;
		color: #FFFFFF;
		font-size: 30rpx;
		line-height: 50rpx;
		text-align: center;
		border-radius: 10rpx;
	}

	.time {
		display: flex;
		height: 80rpx;
		align-items: center;
		justify-content: center;
		position: fixed;
		top: 0;
		background-color: #FFFFFF;
		/* #ifdef H5 */
		top: 168rpx;
		/* #endif */
		width: 750rpx;
		z-index: 99;
	}

	.nav {
		position: fixed;
		top: 0;
		background-color: #FFFFFF;
		/* #ifdef H5 */
		top: 88rpx;
		/* #endif */
		width: 750rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		border-bottom: 1px #ECECEC solid;
		z-index: 99;
	}

	.title {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
	}

	.active {
		color: #F09238;
	}
</style>
